<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { router } from "@/router";
import { useRouter, useRoute } from "vue-router";

import { get_scan_tactics, getPocTactics } from "@/api/tactics";
import { task_detail } from "@/api/task";
import { message } from "@/utils/message";
import { copyTextToClipboard } from "@pureadmin/utils";
defineOptions({
  name: "NewDetail",
});

import GatherSix from "../../gather/gathersix.vue";
import dayjs from "dayjs";

const route = useRoute();
const formInline = reactive({
  cancelled_assets: "",
  new_assets: "",
  // department: "",
  assetXa: "",
});

const formAddHardware = reactive({
  taskType: "",
  taskName: "",
  taskRegion: "",
  startTime: "", //启动时间
  linkTactics: "", //关联策略
  cron: "", //cron表达式
  monthDay: "",
  weekDay: "",
});

const addTaskFormRef = ref<FormInstance>();

const hardwareRules = reactive<FormRules>({
  taskName: [
    { required: true, message: "请输入任务名称", trigger: "blur" },
    // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" }
    // { validator: validatePass2, trigger: 'blur' }
  ],
  taskRegion: [
    {
      required: true,
      message: "请填写资产范围~",
      trigger: "blur",
    },
  ],
  taskType: [
    {
      required: true,
      message: "请选择一个任务类别",
      trigger: "change",
    },
  ],
  linkTactics: [
    {
      required: true,
      message: "请关联策略",
      trigger: "change",
    },
  ],
  startTime: [
    {
      // type: "array",
      required: true,
      message: "请选择日期区间",
      trigger: "change",
      // fields: {
      //   // tpye类型试情况而定,所以如果返回的是date就改成date,如果返回的是string就改成string
      //   0: { type: "date", required: true, message: "请选择开始日期" },
      //   1: { type: "date", required: true, message: "请选择结束日期" }
      // }
    },
  ],
});

const showAddHardwareDialog = ref(false);

const tableData = ref([]);

const currentPage = ref(1); // 当前页码
const pageSize = ref(20); // 每页显示的条数
const totalTabalData = ref(0); // 总条数
const jobId = ref("123"); // 总条数

const tacticsList = ref([]);

const getTaskDetail = () => {
  task_detail({
    job_id: jobId.value,
    per_page: pageSize.value,
    page: currentPage.value,
    assetXa: formInline.assetXa,
    new_assets: formInline.new_assets,
    cancelled_assets: formInline.cancelled_assets,
  }).then((res) => {
    if (res.code === 2000) {
      tableData.value = res.data;
      totalTabalData.value = res.total;
    }
  });
};

//复制资产
const copyAsset = (params, type) => {
  const success = copyTextToClipboard(params.row.department);
  message("复制成功", { type: "success" });
};

// // gotoOrderDetail
// const gotoOrderDetail = rowdata => {
//   router.push("/workorder/orderdetail");
// };

watch(showAddHardwareDialog, (newVal, oldVal) => {
  // resetAddTaskForm();
});

onMounted(() => {
  console.log(route.query.jobid);
  const jobid = route.query.jobid;
  jobId.value = jobid as string;
  getTaskDetail();
});
</script>

<template>
  <div>
    <div class="">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <el-form
              :inline="true"
              :model="formInline"
              size="small"
              class="demo-form-inline"
              @submit.prevent
            >
              <el-form-item label="资产">
                <el-input
                  v-model="formInline.assetXa"
                  placeholder="资产"
                  maxlength="30"
                  clearable
                  @keydown.enter="getTaskDetail"
                >
                  <template #append>
                    <el-button :icon="Search" @click="getTaskDetail" />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="疑似部门" v-if="false">
                <el-input
                  v-model="formInline.department"
                  placeholder="疑似部门"
                  maxlength="30"
                  clearable
                  @keydown.enter="getTaskDetail"
                >
                  <template #append>
                    <el-button :icon="Search" @click="getTaskDetail" />
                  </template>
                </el-input>
              </el-form-item>
              <!-- 写一个下拉框，里面是等级分类，用户更加等级变化调用查询接口 -->
              <el-form-item label="资产状态">
                <el-select
                  v-model="formInline.cancelled_assets"
                  placeholder="请选择"
                  @change="getTaskDetail"
                >
                  <el-option label="可用" value="0" />
                  <el-option label="不可用" value="1" />
                </el-select>
              </el-form-item>
              <el-form-item label="报备状态">
                <el-select
                  v-model="formInline.new_assets"
                  placeholder="请选择"
                  @change="getTaskDetail"
                >
                  <el-option label="已报备" value="0" />
                  <el-option label="未报备" value="1" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </template>

        <el-table :data="tableData" style="width: 100%">
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column width="80" label="ID" prop="id" />
          <el-table-column label="资产" prop="assetXa" />
          <el-table-column label="端口" prop="port" width="100" />
          <el-table-column label="疑似部门" prop="department" width="300">
            <template #default="rowscope">
              <div class="ellipsis">{{ rowscope.row.department }}</div>
            </template>
          </el-table-column>
          <el-table-column label="">
            <template #default="rowscope">
              <div>
                <el-link
                  type="primary"
                  :underline="true"
                  @click="copyAsset(rowscope, 'normal')"
                  >复制</el-link
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="资产状态" prop="cancelled_assets">
            <template #default="rowscope">
              <span>{{
                rowscope.row.cancelled_assets == "0" ? "可用" : "不可用"
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="报备状态" prop="new_assets">
            <template #default="rowscope">
              <span>{{
                rowscope.row.new_assets == "1" ? "未报备" : "已报备"
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" v-if="false">
            <!-- <template #default="rowscope">
              <el-button size="small" type="primary" @click="gotoOrderDetail">
                删除</el-button
              >
            </template> -->
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="getTaskDetail"
          v-model:current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          v-model:page-size="pageSize"
          @size-change="getTaskDetail"
          layout="total, sizes, prev, pager,next"
          :total="totalTabalData"
          background
        />
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card__header) {
}

:deep(.el-pagination) {
  justify-content: right;
  margin-top: 10px;
  margin-right: 30px;
}
.gather-container {
  display: block;
  margin-bottom: 10px;
}

.min-w-input {
  width: 300px;
}

.el-btn-zese {
  background: #722ed1;
  color: white;
  border-color: #722ed1;
}

.el-btn-zese.is-disabled,
.el-btn-zese.is-disabled:focus,
.el-btn-zese.is-disabled:hover {
  background: #722ed1;
  color: white;
  border-color: #722ed1;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
